<template>
  <div>
    <div class="people">
      <div class="peoplefirst" v-for="(item, index) in classData" :key="index">
        <!-- <img class="peoplefirst-img" :src="item.face" alt=""   /> -->
       <div @click="gotoMypage(item)">
        <Avatar
            class="peoplefirst-img"
                shape="circle"
                :src="item.face"
                @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                icon="ios-person"
                size="28"
              />
       </div>

        <div class="people-center">
          <div class="people-left">
            <span>{{ item.nick_name || '匿名用户' }}</span>
            <div class="fs">{{ item.fans }}粉丝</div>
            <span class="fs-xq">{{item.content}}</span>
          </div>
          <div class="people-right"  @click="handleFocus(item)">
            <span>{{item.focus == '0'?'+关注':'已关注'}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { useraddindex,followUser } from "@/api/community";
import { time } from "@/config/time";
export default {
  props: {
    classData:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      selectList: [],
      focusqz:[],
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 跳转至个人中心
    gotoMypage(item) {
      this.$router.push(
        {
          path: "/personalpage",
        query:item
        },
        // console.log()
      );
    },
     // 关注
     handleFocus(item) {
        this.clickFollowFriend(item)
			},
      clickFollowFriend(e) {
				followUser({
					foucsid: e.aouthid,
					mid: JSON.parse(localStorage.userInfo).id,
					type: e.focus == 1 ? 0 : 1, // 0 取消， 1 关注
				}).then(res => {
					if(res.code === 1) {
            this.$emit('upquanziList')
						// this.getCircle()
					}
				})
			},
    // 获取数据
    getList(){
      // useraddindex({
      //   mid:JSON.parse(localStorage.userInfo).id,
      // page:1,
      // pagesize: 10
      // }).then(res=>{
      //   console.log(res,"加个好友");
      // })
    }
  },
};
</script>

<style lang="scss" scoped>
.people {
  padding: 0 7px;
  .peoplefirst {
    height: 71px;
    width: 100%;
    // border: 1px solid red;
    display: flex;
    .peoplefirst-img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      margin-right: 7px;
    }
    .people-center {
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 10px;
      .people-left {
        width: 142px;
        font-size: 8px;
        font-weight: 400;
        color: #333333;
        .fs {
          // width: 33px;
          // width: 41px;
          width: auto;
          height: 11px;
          background: #fff8ec;
          border-radius: 2px;
          font-size: 7px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffa341;
          margin-bottom: 5px;
        }
        .fs-xq {
          font-size: 8px;
          font-weight: 400;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
          display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
          -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
          -webkit-line-clamp: 1;
        }
      }
      .people-right {
        // width: 32px;
        padding: 0 5px;
        height: 14px;
        border: 1px solid #fd5151;
        border-radius: 7px;
        font-size: 7px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #fd5151;
        text-align: center;
        line-height: 14px;
      }
    }
  }
}
</style>
